@page "/ComboBox/Cascading"

@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Data

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the cascading functionalities of the ComboBox. Choose a country from countries ComboBox, then respective states will be loaded in the second ComboBox.</p>
</SampleDescription>
<ActionDescription>
   <p>The <code>Cascading</code> ComboBox is the series of ComboBox, where the value of one ComboBox depends on the another ComboBox value. This can be configured by using the <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-1.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_1_ValueChange' target='_blank'> ValueChange</a> event of parent ComboBox. Within that change event handler, you should load the data to child ComboBox based on the selected value of parent ComboBox.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="control-wrapper">
        <div class="padding-top">
            <SfComboBox TValue="string" TItem="Countries" Placeholder="Select a country" AllowCustom="false" PopupHeight="auto" DataSource="@Country">
                <ComboBoxEvents TValue="string" TItem="Countries" ValueChange="ChangeCountry"></ComboBoxEvents>
                <ComboBoxFieldSettings Text="CountryName" Value="CountryId"></ComboBoxFieldSettings>
            </SfComboBox>
        </div>
        <div class="padding-top">
            <SfComboBox TValue="string" TItem="State" Enabled="@EnableStateDropDown" @bind-Value="@StateValue" Placeholder="Select a state" Query="@StateQuery" AllowCustom="false" PopupHeight="auto" DataSource="@States">
                <ComboBoxEvents TValue="string" TItem="State" ValueChange="ChangeState"></ComboBoxEvents>
                <ComboBoxFieldSettings Text="StateName" Value="StateId"></ComboBoxFieldSettings>
            </SfComboBox>
        </div>
        <div class="padding-top">
            <SfComboBox TValue="string" TItem="city" Enabled="@EnableCitytDropDown" @bind-Value="@CityValue" Placeholder="Select a city" Query="@CityQuery" PopupHeight="auto" DataSource="@cites">
                <ComboBoxFieldSettings Text="CityName" Value="CityId"></ComboBoxFieldSettings>
            </SfComboBox>
        </div>
    </div>
</div>

<style>

    .control-wrapper {
        margin: 0 auto;
        width: 250px;
    }

    .control-section .padding-top {
        padding-top: 35px
    }
</style>


@code {
    public bool EnableStateDropDown = false;
    public bool EnableCitytDropDown = false;
    public string StateValue { get; set; } = null;
    public Query StateQuery { get; set; } = null;
    public string CityValue { get; set; } = null;
    public Query CityQuery { get; set; } = null;

    public void ChangeCountry(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, Countries> args)
    {
        this.EnableStateDropDown = !string.IsNullOrEmpty(args.Value);
        this.EnableCitytDropDown = false;
        this.StateQuery = new Query().Where(new WhereFilter() { Field = "CountryId", Operator = "equal", value = args.Value, IgnoreCase = false, IgnoreAccent = false });
        this.StateValue = null;
        this.CityValue = null;
    }

    public void ChangeState(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, State> args)
    {
        this.EnableCitytDropDown = !string.IsNullOrEmpty(args.Value);
        this.CityQuery = new Query().Where(new WhereFilter() { Field = "StateId", Operator = "equal", value = args.Value, IgnoreCase = false, IgnoreAccent = false });
        this.CityValue = null;
    }

    public class State
    {
        public string StateName { get; set; }

        public string CountryId { get; set; }

        public string StateId { get; set; }
    }

    public class Countries
    {
        public string CountryName { get; set; }

        public string CountryId { get; set; }
    }
    public class city
    {
        public string CityName { get; set; }
        public string StateId { get; set; }
        public string CityId { get; set; }
    }

    public List<Countries> Country = new List<Countries>() {
        new Countries(){ CountryName= "Australia", CountryId= "2" },
        new Countries(){ CountryName= "United States", CountryId= "1" },
    };

    public List<State> States = new List<State>() {
        new State() { StateName= "New York", CountryId= "1", StateId= "101" },
        new State() { StateName= "Queensland", CountryId= "2", StateId= "104" },
        new State() { StateName= "Tasmania ", CountryId= "2", StateId= "105" },
        new State() { StateName= "Victoria", CountryId= "2", StateId= "106" },
        new State() { StateName= "Virginia", CountryId= "1", StateId= "102" },
        new State() { StateName= "Washington", CountryId= "1", StateId= "103" }
    };

    public List<city> cites = new List<city>()
{
         new city() { CityName = "Aberdeen", StateId= "103", CityId= "207" },
         new city() { CityName = "Albany", StateId= "101", CityId= "201" },
         new city() { CityName = "Brisbane ", StateId="104", CityId= "211" },
         new city() { CityName = "Colville ", StateId= "103", CityId= "208" },
         new city() { CityName ="Emporia", StateId= "102", CityId= "206" },
         new city() { CityName = "Hampton ", StateId= "102", CityId= "205" },
         new city() { CityName ="Hobart", StateId= "105", CityId= "213" },
         new city() { CityName ="Lockport", StateId= "101", CityId= "203" },
         new city() { CityName =  "Pasco", StateId= "103", CityId= "209" },
         new city() { CityName= "Alexandria", StateId= "102", CityId= "204" },
         new city() { CityName= "Beacon ", StateId= "101", CityId= "202" },
         new city() { CityName= "Cairns", StateId= "104", CityId= "212" },
         new city() { CityName= "Devonport", StateId= "105", CityId= "215" },
         new city() { CityName= "Geelong", StateId= "106", CityId= "218" },
         new city() { CityName= "Healesville ", StateId="106", CityId= "217" },
         new city() { CityName= "Launceston ", StateId= "105", CityId= "214" },
         new city() { CityName= "Melbourne", StateId= "106", CityId="216" },
         new city() { CityName= "Townsville", StateId= "104", CityId= "210" }
    };
}
